<template>
  <div class="permission">
    <div class="desc">
      <div class="left">
        <ep-title :title="$route.meta.title"></ep-title>
        <ep-count :count="pageInfo.total"></ep-count>
        <!--<ep-time style="padding-left: 15px" timer="2023-02-24 23:59"></ep-time>-->
      </div>
    </div>
    <div class="operate">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
              v-model="queryParam.fullName"
              placeholder="姓名"
              enter-button="chaxun "
              @search="findUserListBtn"
          ></ep-search>
        </div>
        <ep-button style="margin-left: 15px" icon="refresh.svg" @click="findUserListBtn"></ep-button>
        <!--<div class="field">-->
        <!--  <ep-button style="margin-left: 15px" icon="field.svg" @click="fieldVisible = !fieldVisible">字段展示</ep-button>-->
        <!--  <div class="field-box" v-if="fieldVisible">-->
        <!--    <ul>-->
        <!--      <li v-for="(column, index) in tableColumn" :key="index">-->
        <!--        <vxe-checkbox v-model="column.visible" :key="index" v-if="column.type !== ('radio' || 'checkbox')">{{column.title }}</vxe-checkbox>-->
        <!--      </li>-->
        <!--    </ul>-->
        <!--    <div class="btn">-->
        <!--      <p @click="fieldConfirm">确认</p>-->
        <!--      <p @click="fieldRevert">还原</p>-->
        <!--    </div>-->
        <!--  </div>-->
        <!--</div>-->
      </div>
      <div>
        <!--<ep-button style="margin-left: 15px" icon="add.svg" @click="openAddUser">新增</ep-button>-->
        <!--<ep-button style="margin-left: 15px" icon="export.svg" @click="openEditUser">编辑</ep-button>-->
        <!--<ep-button style="margin-left: 15px" type="danger" icon="del.svg" @click="deleteUser">删除</ep-button>-->
      </div>
    </div>
    <div class="ep-table">
      <zh-table
          :shadow="true"
          ref="myPendTable"
          :columns="tableColumn"
          :url="tableUrl"
          :disabled="false"
          size="small"
          auto-resize
          height="auto"
          :sort-config="tableSort"
          @sort-change="sortChangeEvent"
          @edit-closed="userRemarksChange">
        <template #op_ass="{ row }">
          <a-tooltip placement="top">
            <template slot="title">
              <span>查看详情</span>
            </template>
            <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;" type="search"
                    @click="editRow(row)"></a-icon>
          </a-tooltip>
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import ZhTable from "@/components/zh-table/ZhTable";
import {createUser, getPersonList, removeUser, updateUser} from "@/services/system/whdngxlApi";
import {
  // claimBatch,
  // completeBatch,
  // downLoadMyPendExcel,
  // getApplyingTasks,
  // getCustomApplyingTasks,
  // getReActIdList,
  saveUserRemarks
} from "@/services/system/workflowApi"
import modal from "ant-design-vue/lib/modal";

export default {
  name: "MyPand",
  components: {ZhTable},
  data() {
    return {
      visible: false,
      fieldVisible: false,
      modalTitle: '操作',
      // 查询参数
      queryParam: {},
      // 表头
      tableColumn: [
        {
          type: 'radio', width: 50, fixed: 'left', align: 'center', slots: {
            header: () => {
              return [<a-tooltip placement="top" title="取消选择">
                <a-icon type="stop" theme="twoTone" onClick={this.clearRadioRowEvent}/>
              </a-tooltip>]
            }
          }
        },
        {type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号', visible: true},
        {field: 'userName', title: '用户名', fixed: 'left', align: 'center', width: 150, visible: false},
        {field: 'fullName', title: '姓名', align: 'center', fixed: 'left', width: 150, visible: true},
        {field: 'a0202NameList', title: '人员类型', align: 'center', fixed: 'left', visible: true},
        {field: 'area', title: '管理区域', align: 'center', visible: true},
        {field: 'a0102Name', title: '所属机构', align: 'center', width: 150, visible: true},
        {field: 'a0103Name', title: '所属科室', align: 'center', width: 100, visible: true},
        {field: 'a0104Name', title: '所属职务', align: 'center', width: 150, visible: true},
        {field: 'a0105', title: '联系方式', align: 'center', width: 150, visible: true},
      ],
      tableData: [],
      tableSort: {
        remote: true,
        multiple: true,
        trigger: 'cell'
      },
      selectRow: null,
      tableHeight: 0,
      tableUrl: getPersonList,
      pageInfo: {
        total: 14,
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    // this.getTableData();
    this.$nextTick(() => {
      this.findUserList()
      this.getTableHeight();
    });
    window.addEventListener("resize", this.getTableHeight);
  },
  methods: {
    onSearch() {
    },
    clearRadioRowEvent() {
      this.selectRow = null
      this.userId = null
      this.$refs.userListTable.clearRadioRow()
    },
    // 字段展示- 筛选确认
    fieldConfirm() {
      this.fieldVisible = false;
      this.$refs.userListTable.refreshColumn(200);
    },
    // 字段展示-还原
    fieldRevert() {
      this.fieldVisible = false;
      this.tableColumn.forEach((el) => {
        el.visible = true;
      });
      this.$refs.userListTable.refreshColumn(200);
    },
    // 用户列表查询
    findUserListBtn() {
      this.findUserList()
    },
    findUserList() {
      this.$refs.userListTable.query(this.queryParam)
    },
    refreshList() {
      this.$refs.userListTable.refresh(this.queryParam)
    },
    radioChangeEvent({row}) {
      this.selectRow = row
      this.userId = row.userId
      console.log('单选事件')
    },
    onStatusChange({row}) {
      console.log(row)
    },
    handlePageChange({currentPage, pageSize}) {
      this.pageInfo.currentPage = currentPage;
      this.pageInfo.pageSize = pageSize;
    },
    getTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 359;
      });
    },
    openAddUser() {
      this.clearRadioRowEvent()
      this.selectRow = null
      this.modalTitle = '新增用户信息'
      this.visible = true
    },
    openEditUser() {
      if (this.selectRow) {
        this.modalTitle = '修改用户信息'
        this.visible = true
      } else {
        modal.warn({title: '提示', content: '请先选择需要修改的数据'})
      }
    },
    handleUser() {
      const {$refs: {userPage}} = this
      userPage.saveOrUpdate().then(formData => {
        console.log(formData)
        if (formData.userId) {
          this.$http.post(updateUser, formData).then(() => {
            modal.info({title: '成功提示', content: '修改成功'})
            this.visible = false
            // this.queryParam.userName = res.result.userName
            this.findUserList()
          })
        } else {
          this.$http.post(createUser, formData).then(() => {
            modal.info({title: '成功提示', content: '新增成功'})
            this.visible = false
            this.findUserList()
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancelUser() {
      this.visible = false
    },
    deleteUser() {
      if (this.selectRow) {
        const params = {}
        params.userId = this.selectRow.userId
        setTimeout(() => {
          this.$http.post(removeUser, params).then(() => {
            modal.info({title: '成功提示', content: '删除用户成功'})
            this.findUserList()
          }).catch(() => {
          })
        }, 100)
      } else {
        modal.warn({title: '提示', content: '请先选择需要删除的数据'})
      }
    },
    sortChangeEvent({sortList}) {
      this.queryParam.orderVOList = [];
      if (sortList.length > 0) {
        for (let i = 0; i < sortList.length; i++) {
          let orderVO = {};
          orderVO.property = sortList[i].property;
          orderVO.order = sortList[i].order;
          this.queryParam.orderVOList.push(orderVO);
        }

        // this.workQuerylList()
      } else {
        // this.workQuerylList()
      }
    },
    userRemarksChange({row}) {
      let param = {};
      param.remarks = row.userRemarks;
      param.busNo = row.busNo;
      this.$http.post(saveUserRemarks, param).then(() => {
      });
    },
    //办理
    editRow(row) {
      this.auditVisible = true;
      //zip打包名称
      let zipName = row.operationName + '【' + row.applicantName + '】' + row.busNo + '.zip';
      this.comData = {
        name: row.name,
        busNo: row.busNo,
        taskId: row.id,
        flowNodeId: row.flowNodeId,
        status: row.status,
        executionId: row.executionId,
        procInstId: row.procInstId,
        procDefId: row.procDefId,
        operationType: row.operationType,
        zipName: zipName
      };
    },
  },
}
</script>

<style scoped lang="less">
.permission {
  padding: 15px 20px 0;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
}
</style>
